<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的计划 - 四六级备考仪表盘</title>
    <style>
        /* --- 全局样式与字体 (无变化) --- */
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
        :root {
            --sidebar-width: 260px; --main-bg: #1a1a2e; --glass-bg: rgba(255, 255, 255, 0.1);
            --glass-border: rgba(255, 255, 255, 0.2); --text-color: #EAECEE; --text-color-darker: #B2BABB;
            --accent-color: #4CAF50; --accent-color-hover: #66BB6A; --accent-text: #2E7D32; 
            --success-color: #28a745; --review-color: #FFC107; --learn-color: #2196F3; --border-radius: 15px;
            
            /* 响应式字体基线 (min 20px) */
            --font-size-base: clamp(20px, 1.5vw, 24px); /* Base for body text */
            --font-size-small: clamp(20px, 1.2vw, 22px); /* Small text, now >= 20px */
            --font-size-large: clamp(22px, 1.8vw, 28px); /* Large text */
            --font-size-title: clamp(24px, 2.2vw, 32px); /* Card titles etc. */
            --font-size-heading: clamp(28px, 2.8vw, 38px); /* Main headings */
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Noto Sans SC', sans-serif; background-image: linear-gradient(to right top, #5a8c43, #68974d, #77a158, #85ac62, #93b76d);
            background-size: 400% 400%; animation: gradientBG 15s ease infinite; color: var(--text-color); display: flex; overflow-x: hidden;
            font-size: var(--font-size-base); line-height: 1.6;
        }
        @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
        .glass-effect {
            background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border); border-radius: var(--border-radius); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
        }

        /* --- 汉堡菜单按钮 --- */
        .hamburger-menu {
            display: none;
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 1001;
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            border-radius: 8px;
            padding: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .hamburger-menu:hover {
            background: rgba(255, 255, 255, 0.15);
            transform: scale(1.05);
        }
        .hamburger-icon {
            width: 24px;
            height: 18px;
            position: relative;
        }
        .hamburger-icon span {
            display: block;
            height: 2px;
            width: 100%;
            background: var(--text-color);
            border-radius: 1px;
            position: absolute;
            transition: all 0.3s ease;
        }
        .hamburger-icon span:nth-child(1) { top: 0; }
        .hamburger-icon span:nth-child(2) { top: 8px; }
        .hamburger-icon span:nth-child(3) { top: 16px; }
        
        /* 汉堡菜单激活状态 */
        .hamburger-menu.active .hamburger-icon span:nth-child(1) {
            transform: rotate(45deg);
            top: 8px;
        }
        .hamburger-menu.active .hamburger-icon span:nth-child(2) {
            opacity: 0;
        }
        .hamburger-menu.active .hamburger-icon span:nth-child(3) {
            transform: rotate(-45deg);
            top: 8px;
        }
        
        /* --- 遮罩层 --- */
        .sidebar-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .sidebar-overlay.active {
            display: block;
            opacity: 1;
        }

        /* --- 侧边栏 (微调激活状态) --- */
        .sidebar { 
            width: var(--sidebar-width); 
            height: 100vh; 
            position: fixed; 
            left: 0; 
            top: 0; 
            padding: 28px 18px; 
            display: flex; 
            flex-direction: column; 
            transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
            z-index: 1000;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
            overflow-y: auto;
            overflow-x: hidden;
        }
        .sidebar::-webkit-scrollbar {
            width: 6px;
        }
        .sidebar::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
        }
        .sidebar::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 3px;
        }
        .sidebar::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.5);
        }
        .sidebar .logo { text-align: center; margin-bottom: 45px; }
        .sidebar .logo h1 { font-size: var(--font-size-heading); font-weight: 700; letter-spacing: 1px; }
        .sidebar .logo p { font-size: var(--font-size-base); color: var(--text-color-darker); }
        .sidebar nav ul { list-style: none; flex-grow: 1; }
        .sidebar nav li { margin-bottom: 18px; }
        .sidebar nav a { display: flex; align-items: center; padding: 16px 18px; text-decoration: none; color: var(--text-color); border-radius: 10px; font-weight: 500; transition: background 0.3s ease, color 0.3s ease; cursor: pointer; font-size: var(--font-size-base);}
        .sidebar nav a svg { width: 24px; height: 24px; margin-right: 18px; }
        .sidebar nav a:hover { background: var(--glass-bg); }
        .sidebar nav a.active { background: var(--accent-color); color: #fff; box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4); }

        /* --- 主内容区域 (无变化) --- */
        .main-content { margin-left: var(--sidebar-width); flex-grow: 1; padding: 30px; min-height: 100vh; }
        .dashboard-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
            gap: 25px; 
            max-width: 1200px; 
            margin: 0 auto; 
        }
        .grid-item { padding: 25px; animation: fadeInFromBottom 0.5s ease-out forwards; opacity: 0; transform: translateY(20px); }
        @keyframes fadeInFromBottom { to { opacity: 1; transform: translateY(0); } }
        .grid-item:nth-child(1) { animation-delay: 0.1s; }
        .grid-item:nth-child(2) { animation-delay: 0.2s; }
        .grid-item:nth-child(3) { animation-delay: 0.3s; }
        .card-title { font-size: var(--font-size-title); font-weight: 500; margin-bottom: 20px; display: flex; align-items: center; }
        .card-title svg { width: 22px; height: 22px; margin-right: 10px; color: var(--accent-color-hover); }

        /* --- 【新】页面切换样式 --- */
        .view { display: none; }
        .view.active { display: block; }
        .view.active-grid { display: grid; } /* 保持仪表盘的 grid 布局 */

        /* --- 【更新】今日任务卡片样式 --- */
        .task-list ul { list-style: none; max-height: 200px; overflow-y: auto; padding-right: 10px;}
        .task-list li { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 10px; border-radius: 8px; transition: background 0.3s ease; }
        .task-list li:hover { background: rgba(255, 255, 255, 0.05); }
        .task-list input[type="checkbox"] { display: none; }
        .task-list label { cursor: pointer; display: flex; align-items: center; flex-grow: 1; }
        .task-list .custom-checkbox { width: 20px; height: 20px; border: 2px solid var(--glass-border); border-radius: 5px; margin-right: 15px; display: flex; align-items: center; justify-content: center; transition: all 0.3s; flex-shrink: 0; }
        .task-list .custom-checkbox svg { width: 14px; height: 14px; color: white; opacity: 0; transform: scale(0.5); transition: all 0.3s; }
        .task-list input[type="checkbox"]:checked + label .custom-checkbox { background-color: var(--success-color); border-color: var(--success-color); }
        .task-list input[type="checkbox"]:checked + label .custom-checkbox svg { opacity: 1; transform: scale(1); }
        .task-list .task-text { transition: all 0.3s; }
        .task-list input[type="checkbox"]:checked + label .task-text { text-decoration: line-through; color: var(--text-color-darker); }
        .delete-task { background: none; border: none; color: var(--text-color-darker); cursor: pointer; opacity: 0; transition: opacity 0.3s; }
        .task-list li:hover .delete-task { opacity: 1; }
        #add-task-form { display: flex; margin-top: 20px; }
        #new-task-input { flex-grow: 1; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 8px; padding: 10px 15px; color: var(--text-color); outline: none; }
        #add-task-btn { background: var(--accent-color); border: none; color: white; padding: 10px 20px; border-radius: 8px; margin-left: 10px; cursor: pointer; transition: background 0.3s; }
        #add-task-btn:hover { background: var(--accent-color-hover); }


        /* --- 【新】词汇中心样式 --- */
        .pdf-card { padding: 25px; text-align: center; }
        .pdf-card svg.file-icon { width: 60px; height: 60px; color: var(--accent-text); margin-bottom: 15px; }
        .pdf-card h4 { font-size: var(--font-size-large); margin-bottom: 10px; }
        .pdf-card p { font-size: var(--font-size-base); color: var(--text-color-darker); margin-bottom: 25px; min-height: 40px; }
        .pdf-actions { display: flex; justify-content: center; gap: 15px; }
        .pdf-actions .btn { padding: 10px 20px; border-radius: 8px; text-decoration: none; font-weight: 500; transition: all 0.3s; font-size: var(--font-size-base); }
        .pdf-actions .btn-preview { background: var(--accent-color); color: white; border: 1px solid var(--accent-color); }
        .pdf-actions .btn-preview:hover { background: var(--accent-color-hover); }
        .pdf-actions .btn-download { background: transparent; color: var(--text-color); border: 1px solid var(--glass-border); }
        .pdf-actions .btn-download:hover { background: var(--glass-bg); }



        /* --- 【新】词汇打卡表样式 --- */
        .checkin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
        .week-selector { display: flex; gap: 10px; align-items: center; }
        .week-nav-btn { background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-color); padding: 8px 15px; border-radius: 8px; cursor: pointer; transition: all 0.3s; }
        .week-nav-btn:hover { background: var(--accent-color); }
        .week-info { font-size: 16px; font-weight: 500; margin: 0 15px; }
        
        .checkin-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
        .checkin-table th, .checkin-table td { padding: 16px; text-align: center; border: 1px solid var(--glass-border); }
        .checkin-table td { font-size: clamp(20px, 1.8vw, 22px); }
        .checkin-table th { background: var(--glass-bg); font-weight: 500; font-size: clamp(20px, 1.8vw, 22px); }
        .checkin-table .day-header { background: rgba(76, 175, 80, 0.12); font-weight: 600; }
        
        .time-slot { margin-bottom: 10px; }
        .time-slot:last-child { margin-bottom: 0; }
        .time-label { font-size: 14px; color: var(--text-color-darker); margin-bottom: 8px; font-weight: 500; }
        
        .checkin-actions { display: flex; gap: 12px; justify-content: center; }
        .checkin-btn {
            padding: 12px 24px;
            font-size: clamp(20px, 1.8vw, 22px);
            border-radius: 12px;
            font-weight: 500;
            border: none;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            min-width: 80px;
            position: relative;
            overflow: hidden;
        }
        .checkin-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.3s ease, height 0.3s ease;
        }
        .checkin-btn:active::before {
            width: 120px;
            height: 120px;
        }
        .checkin-btn.review { background: rgba(255, 193, 7, 0.15); color: var(--review-color); border: 1px solid rgba(255, 193, 7, 0.25); }
        .checkin-btn.review.completed { background: var(--review-color); color: #111; border: 1px solid var(--review-color); }
        .checkin-btn.learn { background: rgba(33, 150, 243, 0.15); color: var(--learn-color); border: 1px solid rgba(33, 150, 243, 0.25); }
        .checkin-btn.learn.completed { background: var(--learn-color); color: white; border: 1px solid var(--learn-color); }
        .checkin-btn:hover:not(.completed) { 
            transform: translateY(-2px) scale(1.05); 
            box-shadow: 0 6px 16px rgba(0,0,0,0.15); 
        }
        .checkin-btn:active {
            transform: translateY(0) scale(0.98);
            transition: all 0.1s ease;
        }
        
        .week-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 15px; margin-top: 20px; }
        .stat-card { padding: 15px; text-align: center; border-radius: 10px; background: var(--glass-bg); }
        .stat-number { font-size: 24px; font-weight: 700; color: var(--accent-text); }
        .stat-label { font-size: 12px; color: var(--text-color-darker); margin-top: 5px; }
        
        /* --- 大屏幕优化 --- */
        @media (min-width: 1200px) {
            .dashboard-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        @media (min-width: 1600px) {
            .dashboard-grid {
                grid-template-columns: repeat(3, 380px);
                justify-content: center;
            }
        }

        /* --- 响应式设计 (无变化) --- */
        @media (max-width: 992px) {
            .hamburger-menu { display: block; }
            .sidebar { 
                transform: translateX(-100%); 
                z-index: 1000;
                width: min(280px, 85vw);
                box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
            }
            .sidebar.open { 
                transform: translateX(0);
                box-shadow: 4px 0 20px rgba(0, 0, 0, 0.25);
            }
            .main-content { 
                margin-left: 0; 
                padding-top: 80px;
                transition: filter 0.3s ease;
            }
            .main-content.sidebar-open {
                filter: blur(2px);
            }
        }

        /* 新增：主页问候与介绍样式 */
        .greeting-top { margin-bottom: 18px; }
        .greeting-top h2 { font-size: var(--font-size-heading); font-weight: 600; letter-spacing: 0.5px; }
        .greeting-top h2 span { color: var(--accent-text); }

        .intro-section { display: flex; justify-content: flex-start; margin: 10px 0 26px; width: 100%; }
        .dashboard-grid .intro-section { grid-column: 1 / -1; }
        .intro-card { max-width: 980px; width: 100%; padding: 22px 26px; line-height: 1.9; margin-left: 0; }
        .intro-card h4 { margin: 12px 0 6px; font-size: var(--font-size-large); color: var(--accent-text); }
        .intro-card p { color: var(--text-color); font-size: var(--font-size-base); margin: 8px 0; }

        /* --- 水印样式 --- */
        .watermark {
            position: fixed;
            bottom: 15px;
            left: 15px;
            z-index: 1001;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.3);
            text-align: left;
            pointer-events: none; /* 确保水印不影响下层元素的交互 */
        }
        .watermark p {
            margin: 0;
            line-height: 1.4;
        }

        /* 毛玻璃基础效果 */
        .glass-effect {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.16);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 14px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.08);
        }

        /* --- 【新增】资源库样式 --- */
        .resource-section {
            margin-bottom: 25px;
            padding: 20px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
        .resource-section:last-child {
            margin-bottom: 0;
        }
        .resource-item {
            display: flex;
            flex-direction: column;
            gap: 15px;
            min-height: 80px;
        }
        .resource-info h5 {
            margin: 0 0 8px 0;
            font-size: var(--font-size-large);
            color: var(--text-color);
            font-weight: 600;
        }
        .resource-info p {
            margin: 0;
            color: var(--text-color-darker);
            font-size: var(--font-size-base);
            line-height: 1.5;
        }
        .resource-actions {
            flex-shrink: 0;
            align-self: flex-start;
        }
        .resource-actions .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 20px;
            border-radius: 10px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            font-size: var(--font-size-base);
        }
        .resource-actions .btn-download {
            background: var(--glass-bg);
            color: var(--text-color);
            border: 1px solid var(--glass-border);
        }
        .resource-actions .btn-download:hover {
            background: var(--accent-color);
            border-color: var(--accent-color);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        }
        
        /* 响应式适配 */
        @media (max-width: 768px) {
            .resource-actions {
                width: 100%;
            }
            .resource-actions .btn {
                width: 100%;
                justify-content: center;
            }
        }
    
/* ============== 【新增】学习反馈模块样式 ============== */
.feedback-prompt { color: var(--text-color-darker); font-size: 14px; line-height: 1.6; margin-bottom: 8px; display: none; }
.feedback-prompt.active { display: block; }
.feedback-action-btn { 
    margin-top: 10px; 
    padding: 12px 20px; 
    background: var(--glass-bg); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    border: 1px solid var(--glass-border); 
    border-radius: 14px; 
    color: var(--text-color); 
    cursor: pointer; 
    transition: all 0.3s ease; 
    font-weight: 600; 
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.feedback-action-btn:hover { 
    background: rgba(255,255,255,0.15); 
    transform: translateY(-2px); 
    box-shadow: 0 12px 32px rgba(0,0,0,0.12); 
    border-color: rgba(255,255,255,0.3);
}

/* 模态框容器 */
.feedback-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: none; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(4px); animation: fadeIn 0.25s ease; }
.feedback-modal.open { display: flex; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 模态框内容 */
.feedback-content { width: min(820px, 92vw); max-height: 86vh; overflow: hidden; background: rgba(255,255,255,0.06); border: 1px solid var(--glass-border); border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.35); backdrop-filter: blur(12px); transform: translateY(20px); animation: slideUp 0.35s ease forwards; }
@keyframes slideUp { to { transform: translateY(0); } }

.feedback-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--glass-border); background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0)); }
.feedback-header h2 { font-size: 20px; margin: 0; }
.feedback-header .close-feedback { background: transparent; border: none; color: var(--text-color); font-size: 24px; cursor: pointer; padding: 4px 8px; border-radius: 8px; transition: background 0.2s ease; }
.feedback-header .close-feedback:hover { background: rgba(255,255,255,0.08); }

#feedback-form { padding: 14px 20px 20px; overflow: auto; max-height: calc(86vh - 60px); }
.feedback-section { margin-bottom: 16px; padding: 12px; border-radius: 14px; border: 1px dashed var(--glass-border); background: rgba(255,255,255,0.04); }
.feedback-section h3 { margin: 0 0 10px; font-size: 16px; }

/* 任务完成情况区域 */
.task-completion-list { display: grid; grid-template-columns: 1fr; gap: 8px; }
.task-completion-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,0.18); border: 1px solid var(--glass-border); }
.task-completion-item .left { display: flex; align-items: center; gap: 10px; }
.task-completion-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--success-color); }

/* 滑块样式 */
.slider-group { margin-bottom: 12px; }
.slider-label { display: block; margin-bottom: 6px; color: var(--text-color); font-weight: 600; }
.slider-container { display: grid; grid-template-columns: 20px 1fr 20px 40px; align-items: center; gap: 10px; }
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 10px; background: linear-gradient(90deg, rgba(59,130,246,0.6), rgba(59,130,246,0.2)); outline: none; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; background: #fff; border: 2px solid var(--accent-color); border-radius: 50%; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.25); transition: transform 0.15s ease; }
.slider::-webkit-slider-thumb:hover { transform: scale(1.06); }
.slider-value { justify-self: end; font-weight: 700; color: var(--accent-color); }

/* 文本域、单选样式 */
.textarea-group textarea { width: 100%; min-height: 70px; border-radius: 12px; background: rgba(0,0,0,0.18); border: 1px solid var(--glass-border); padding: 10px 12px; color: var(--text-color); resize: vertical; }
.radio-group .radio-options { display: grid; grid-template-columns: 1fr; gap: 8px; }
.radio-option { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,0.18); border: 1px solid var(--glass-border); }
.radio-option input[type="radio"] { accent-color: var(--accent-color); }

/* 提交按钮 */
.feedback-submit { width: 100%; padding: 12px 16px; border: none; border-radius: 12px; background: linear-gradient(135deg, var(--accent-color), #7aa7ff); color: #fff; font-weight: 700; cursor: pointer; box-shadow: 0 10px 30px rgba(59,130,246,0.35); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.feedback-submit:hover { transform: translateY(-1px); box-shadow: 0 16px 36px rgba(59,130,246,0.45); }

@media (min-width: 720px) {
  .task-completion-list { grid-template-columns: 1fr 1fr; }
}

</style>
</head>
<body>

    <!-- ======================= 汉堡菜单按钮 ======================= -->
    <div class="hamburger-menu" id="hamburger-menu">
        <div class="hamburger-icon">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>

    <!-- ======================= 遮罩层 ======================= -->
    <div class="sidebar-overlay" id="sidebar-overlay"></div>

    <!-- ======================= 侧边栏导航 ======================= -->
    <aside class="sidebar glass-effect">
        <div class="logo">
            <h1 class="platform-name">四六级<br>备考平台</h1>
        </div>
        <nav>
            <ul>
                <li><a class="nav-link active" data-view="dashboard-view">
                    <svg xmlns="http://www.w.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>我的计划</a></li>
                <li><a class="nav-link" data-view="vocab-view">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20v2H6.5A2.5 2.5 0 0 1 4 19.5v0Z"/><path d="M4 5h16"/><path d="M4 12h16"/><path d="M4 8h16"/><path d="M4 16h16"/></svg>词汇中心</a></li>
                <li><a class="nav-link" data-view="checkin-view">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>词汇打卡表</a></li>
                <li><a class="nav-link" data-view="training-view"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>专项训练</a></li>
                <li><a class="nav-link" data-view="history-view"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v5h5"/><path d="M3.05 13A9 9 0 1 0 6 5.3L3 8"/><path d="M12 7v5l4 2"/></svg>历史回顾</a></li>
                <li><a class="nav-link" data-view="zhenti-view"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14,2 14,8 20,8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10,9 9,9 8,9"/></svg>真题在线</a></li>
                <li><a class="nav-link" data-view="resource-view"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>资源库</a></li>

            </ul>
        </nav>
        
        <!-- 用户昵称区域 -->
        <div class="user-nickname glass-effect" style="margin-top: 20px; padding: 15px; text-align: center; border-radius: 12px; background: var(--glass-bg); border: 1px solid var(--glass-border);">
            <div id="nickname-display" style="font-size: var(--font-size-large); font-weight: 600; color: var(--text-color); cursor: pointer; transition: all 0.3s ease;" onclick="editNickname()">
                备考小能手
            </div>
            <p style="font-size: var(--font-size-small); color: var(--text-color-darker); margin: 5px 0 0 0;">点击编辑昵称</p>
        </div>

    </aside>

    <!-- ======================= 主内容区域 ======================= -->
    <main class="main-content">
        <!-- 顶部问候 -->
        <div class="greeting-top">
            <h2>你好，<span id="greet-name">备考小能手</span></h2>
        </div>

        <!-- 【视图1】仪表盘 -->
        <div id="dashboard-view" class="view active-grid dashboard-grid">
            <!-- --- 【更新】今日任务 --- -->
            <div class="grid-item glass-effect">
                <h3 class="card-title"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>今日任务</h3>
                <div class="task-list">
                    <ul id="task-list-ul">
                        <!-- 任务将由JS动态添加 -->
                    </ul>
                </div>
                <form id="add-task-form">
                    <input type="text" id="new-task-input" placeholder="添加新任务..." autocomplete="off">
                    <button type="submit" id="add-task-btn">添加</button>
                </form>
            </div>

            <!-- 【新增】每日学习反馈卡片 -->
            <div class="grid-item glass-effect">
                <h3 class="card-title">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4M9 11V9a3 3 0 1 1 6 0v2M9 11h6"/><path d="M12 15v2"/></svg>
                    每日学习反馈
                </h3>
                <div id="feedback-status-area">
                    <!-- 完成前提示 -->
                    <div id="feedback-before" class="feedback-prompt active">
                        <p>📝 今天的学习如何？</p>
                        <p style="color: var(--text-color-darker); font-size: var(--font-size-small); margin-bottom: 15px;">通过反思总结，让每天的进步都被看见</p>
                    </div>
                    
                    <!-- 完成后提示 -->
                    <div id="feedback-after" class="feedback-prompt">
                        <p>✅ 今日反馈已完成</p>
                        <p style="color: var(--text-color-darker); font-size: var(--font-size-small); margin-bottom: 15px;">感谢你的坚持！明天见</p>
                    </div>
                </div>
                
                <button id="feedback-btn" class="feedback-action-btn">
                    <span id="feedback-btn-text">开始反馈</span>
                </button>
                
                <!-- 简要统计显示 -->
                <div id="feedback-stats" style="margin-top: 15px; display: none;">
                    <div style="display: flex; justify-content: space-between; color: var(--text-color-darker); font-size: var(--font-size-small);">
                        <span>专注度: <span id="stat-focus">-</span>/5</span>
                        <span>积极性: <span id="stat-motivation">-</span>/5</span>
                        <span>任务完成: <span id="stat-task-completion">-</span>%</span>
                    </div>
                </div>
            </div>

            <!-- 【新增】学习反馈趋势图 -->
            <div class="grid-item glass-effect">
                <h3 class="card-title">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
                    学习状态趋势
                </h3>
                <p style="color: var(--text-color-darker); font-size: var(--font-size-small); margin-bottom: 15px;">7天专注度和积极性变化曲线</p>
                
                <!-- 图表容器 -->
                <div style="position: relative; height: 180px; margin-top: 15px;">
                    <canvas id="feedback-chart" style="width: 100%; height: 100%;"></canvas>
                </div>
                
                <!-- 图表下方简要统计 -->
                <div style="margin-top: 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: var(--font-size-small); color: var(--text-color-darker);">
                    <div style="text-align: center;">
                        <div style="font-weight: 600; color: var(--accent-color);" id="avg-focus">-</div>
                        <div>平均专注度</div>
                    </div>
                    <div style="text-align: center;">
                        <div style="font-weight: 600; color: #10b981;" id="avg-motivation">-</div>
                        <div>平均积极性</div>
                    </div>
                </div>
            </div>

            <!-- 中部毛玻璃介绍（位于今日任务下方） -->
            <section class="intro-section">
                <div class="intro-card glass-effect">
                    <h4>欢迎来到这里！</h4>
                    <p>我们深知，备考四六级最令人沮丧的，不是单词有多难背，而是付出的努力仿佛石沉大海，不知道自己究竟在哪，离目标还有多远。</p>
                    <p>在开始备考前，我们首先需要理解一个核心问题：英语考试的本质是什么？它并非孤立的知识点考察，而是一门语言能力的综合体现。语言学习是一个长期积累、形成惯性的过程。只有当你将英语学习内化为一种稳定、持续的习惯时，才能在考场压力下发挥出应有的水平。因此，我们的备考思路，始于对语言本身的respect，致力于为你构建一个健康、可持续的学习生态。</p>
                    
                    <h4>1. 基石：将词汇学习，内化为一种高效的惯性</h4>
                    <p>词汇是英语世界最基本的通行证。但传统的死记硬背只会带来挫败感。我们必须 recognizes，背单词的本质是对抗遗忘，而这个需要形成一个科学的习惯。我们推崇的，是基于“艾宾浩斯遗忘曲线”的复习机制：让“复习”与“学习”这两个环节永远并行。你每天的任务不仅是认识新词，更重要的是在遗忘发生前，及时、高频地重温旧识。通过这种方式，词汇学习不再是一场痛苦攻坚战，而是融入你日常的、可积累的稳定惯性。</p>
                    
                    <h4>2. 核心：在实战应用中，理解语言的内在逻辑</h4>
                    <p>掌握了词汇，我们便需要通过听说读写译的练习，去理解英语作为一门语言的真实样貌和内在逻辑。每一个专项训练，都不是为了孤立地“刷题”，而是为了加深你对语言的感知力。例如，精听训练是为了让你捕捉信息的流动，限时阅读是为了让你适应英文的叙事节奏，而写作与翻译则是训练你用英语的逻辑去组织和表达思想。我们强调方法的有效性，旨在帮助你从“认识单词”跨越到“理解语篇”，真正做到学以致用。</p>
                    
                    <h4>3. 灵魂：通过精准反馈，清晰你的能力边界</h4>
                    <p>许多学生直到走进考场，都对自己“能考多少分”缺乏清晰的认知。这是因为他们对自己学习程度的掌握是模糊的、凭感觉的。学习一门语言的过程，也是个人理解能力边界被不断试探、不断清晰化的过程。 而系统性的反馈，就是帮助你主动描绘这个边界的工具。我们的反馈机制（每日反思、每周复盘、考后诊断）并非简单的对错记录，而是引导你进行深度思考的探针：我为什么会在这里卡住？我的困难是源于知识盲区还是技能缺陷？通过持续的自我审视，你能及时调整学习的航向，变被动的“完成任务”为主动的“解决问题”，最终带着自己对能力的清晰认知，自信地走向考场。</p>
                    
                    <h4>总结</h4>
                    <p>总结而言，我们的方法论是一条清晰的路径： 从建立词汇惯性出发，通过实战理解语言，最终依靠反馈看清自己。我们相信，最好的备考，是让你在提升分数的同时，也真正提升语言能力，并掌握一套终身受益的学习方法。</p>
                </div>
            </section>
        </div>

        <!-- 【视图2】词汇中心 -->
        <div id="vocab-view" class="view dashboard-grid">
            <div class="grid-item glass-effect pdf-card">
                <svg class="file-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><line x1="10" y1="9" x2="8" y2="9"/></svg>
                <h4>考试大纲</h4>
                <p>官方发布的完整词汇列表，备考必备的基础资料。</p>
                <div class="pdf-actions">
                    <a href="https://pan.quark.cn/s/125713bd9691" target="_blank" class="btn btn-download">网盘下载</a>
                </div>
            </div>
            <div class="grid-item glass-effect pdf-card">
                <svg class="file-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/><path d="m10.3 16.3 1.4-1.4 1.4 1.4"/><path d="M12 19v-6"/></svg>
                <h4>四级词汇闪过</h4>
                <p>高效的词根词缀记忆法书籍，快速扩大你的词汇量。</p>
                <div class="pdf-actions">
                    <a href="https://pan.quark.cn/s/94d414336c31" target="_blank" class="btn btn-download">网盘下载</a>
                </div>
            </div>
            <div class="grid-item glass-effect pdf-card">
                <svg class="file-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><line x1="10" y1="9" x2="8" y2="9"/></svg>
                <h4>六级词汇闪过</h4>
                <p>全国大学英语六级考试考纲词汇，高效记忆法书籍。</p>
                <div class="pdf-actions">
                    <a href="https://pan.quark.cn/s/a7a4fc5d9df4" target="_blank" class="btn btn-download">网盘下载</a>
                </div>
            </div>
        </div>

        <!-- 【视图3】词汇打卡表（双轮复习） -->
        <div id="checkin-view" class="view">
            <div class="checkin-header">
                <h3 class="card-title" style="margin-bottom:0;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                    词汇打卡表（双轮复习）
                </h3>
                <div class="week-selector">
                    <button class="week-nav-btn" id="prev-week">上周</button>
                    <div class="week-info" id="week-info">第 1 周</div>
                    <button class="week-nav-btn" id="next-week">下周</button>
                </div>
            </div>

            <table class="checkin-table glass-effect">
                <thead>
                    <tr>
                        <th>日期</th>
                        <th>上午（复习/学习）</th>
                        <th>晚上（复习/学习）</th>
                    </tr>
                </thead>
                <tbody id="checkin-tbody">
                    <!-- 由脚本动态渲染一周（7天） -->
                </tbody>
            </table>

            <div class="week-stats">
                <div class="stat-card glass-effect">
                    <div class="stat-number" id="stat-total">0</div>
                    <div class="stat-label">本周总打卡（次）</div>
                </div>
                <div class="stat-card glass-effect">
                    <div class="stat-number" id="stat-review">0</div>
                    <div class="stat-label">复习完成（次）</div>
                </div>
                <div class="stat-card glass-effect">
                    <div class="stat-number" id="stat-learn">0</div>
                    <div class="stat-label">学习完成（次）</div>
                </div>
                <div class="stat-card glass-effect">
                    <div class="stat-number" id="stat-days">0/7</div>
                    <div class="stat-label">达成打卡的天数</div>
                </div>
            </div>

            <!-- 折线图容器 -->
            <div class="glass-effect" style="margin-top: 20px; padding: 15px; border-radius: 12px;">
                <canvas id="checkin-chart" height="120"></canvas>
            </div>
        </div>

        <!-- 【视图4】专项训练视图 -->
        <div id="training-view" class="view dashboard-grid">
            <!-- 听力训练板块 -->
            <div class="grid-item glass-effect">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                    <h3 class="card-title" style="margin: 0;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        听力训练
                    </h3>
                    <button 
                        id="open-listening-external"
                        style="padding: 8px 16px; background: var(--accent-color); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 6px;"
                        title="在新标签页中打开">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
                            <polyline points="15,3 21,3 21,9"/>
                            <line x1="10" y1="14" x2="21" y2="3"/>
                        </svg>
                        新窗口打开
                    </button>
                </div>
                <p style="color: var(--text-color-darker); margin-bottom: 15px;">VOA 慢速英语 - 专业的听力练习平台</p>
                
                <!-- iframe 容器 -->
                <div style="position: relative; width: 100%; height: 500px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,0.12);">
                    <div style="position: absolute; top: 10px; right: 10px; z-index: 10;">
                        <button 
                            onclick="window.open('https://www.21voa.com/special_english/', '_blank')"
                            style="padding: 8px 12px; background: rgba(0,0,0,0.7); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 12px; display: flex; align-items: center; gap: 6px;"
                            title="在新标签页中打开">
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
                                <polyline points="15,3 21,3 21,9"/>
                                <line x1="10" y1="14" x2="21" y2="3"/>
                            </svg>
                            新窗口
                        </button>
                    </div>
                    <iframe 
                        src="https://www.21voa.com/special_english/" 
                        frameborder="0" 
                        style="width: 100%; height: 100%;"
                        title="VOA 听力练习"
                        onload="this.style.opacity='1'"
                        onerror="this.style.display='none'; this.nextElementSibling.style.display='block'">
                    </iframe>
                    
                    <!-- 备用提示 -->
                    <div style="display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: var(--text-color);">
                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom: 15px; opacity: 0.6;"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                        <p style="margin: 0; color: var(--text-color-darker);">无法加载听力练习页面</p>
                        <a href="https://www.21voa.com/special_english/" target="_blank" style="color: var(--accent-color); text-decoration: none; font-size: var(--font-size-base); margin-top: 10px; display: inline-block;">
                            点击此处在新窗口打开 →
                        </a>
                    </div>
                </div>
            </div>

            <!-- 阅读训练板块 -->
            <div class="grid-item glass-effect" style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px;">
                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom: 15px; opacity: 0.6;"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
                <h3 class="card-title" style="margin-bottom: 8px;">阅读训练</h3>
                <p style="color: var(--text-color-darker); text-align: center; margin: 0;">施工中...</p>
                <p style="color: var(--text-color-darker); font-size: var(--font-size-small); text-align: center; margin-top: 5px;">敬请期待阅读理解专项练习</p>
            </div>

            <!-- 翻译训练板块 -->
            <div class="grid-item glass-effect" style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px;">
                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom: 15px; opacity: 0.6;"><path d="M5 8l6 6"/><path d="M4 14l6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="M22 22l-5-10-5 10"/><path d="M14 18h6"/></svg>
                <h3 class="card-title" style="margin-bottom: 8px;">翻译训练</h3>
                <p style="color: var(--text-color-darker); text-align: center; margin: 0;">施工中...</p>
                <p style="color: var(--text-color-darker); font-size: var(--font-size-small); text-align: center; margin-top: 5px;">敬请期待翻译专项练习</p>
            </div>

            <!-- 写作训练板块 -->
            <div class="grid-item glass-effect" style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px;">
                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom: 15px; opacity: 0.6;"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></svg>
                <h3 class="card-title" style="margin-bottom: 8px;">写作训练</h3>
                <p style="color: var(--text-color-darker); text-align: center; margin: 0;">施工中...</p>
                <p style="color: var(--text-color-darker); font-size: var(--font-size-small); text-align: center; margin-top: 5px;">敬请期待写作专项练习</p>
            </div>
        </div>

        <!-- 【视图5】历史回顾视图 -->
        <div id="history-view" class="view">
            <!-- 历史回顾头部 -->
            <div class="history-header glass-effect" style="margin-bottom: 20px; padding: 20px; border-radius: 12px;">
                <h2 style="margin: 0 0 10px 0; font-size: 24px; color: var(--text-color);">📊 学习历史回顾</h2>
                <p style="margin: 0; color: var(--text-color-darker); font-size: 16px;">查看您的学习轨迹，分析进步趋势</p>
            </div>

            <!-- 快速统计卡片 -->
            <div class="history-stats-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 25px;">
                <div class="stat-card glass-effect" style="padding: 20px; border-radius: 12px; text-align: center;">
                    <div class="stat-number" id="total-days" style="font-size: 28px; font-weight: 700; color: var(--accent-color); margin-bottom: 5px;">0</div>
                    <div class="stat-label" style="color: var(--text-color-darker); font-size: 14px;">总学习天数</div>
                </div>
                <div class="stat-card glass-effect" style="padding: 20px; border-radius: 12px; text-align: center;">
                    <div class="stat-number" id="avg-completion" style="font-size: 28px; font-weight: 700; color: var(--success-color); margin-bottom: 5px;">0%</div>
                    <div class="stat-label" style="color: var(--text-color-darker); font-size: 14px;">平均完成率</div>
                </div>
                <div class="stat-card glass-effect" style="padding: 20px; border-radius: 12px; text-align: center;">
                    <div class="stat-number" id="streak-days" style="font-size: 28px; font-weight: 700; color: var(--warning-color); margin-bottom: 5px;">0</div>
                    <div class="stat-label" style="color: var(--text-color-darker); font-size: 14px;">连续学习天数</div>
                </div>
                <div class="stat-card glass-effect" style="padding: 20px; border-radius: 12px; text-align: center;">
                    <div class="stat-number" id="avg-focus" style="font-size: 28px; font-weight: 700; color: var(--info-color); margin-bottom: 5px;">0</div>
                    <div class="stat-label" style="color: var(--text-color-darker); font-size: 14px;">平均专注度</div>
                </div>
            </div>

            <!-- 筛选和控制面板 -->
            <div class="history-controls glass-effect" style="margin-bottom: 20px; padding: 20px; border-radius: 12px;">
                <div style="display: flex; flex-wrap: wrap; gap: 15px; align-items: center; justify-content: space-between;">
                    <div style="display: flex; gap: 15px; align-items: center; flex-wrap: wrap;">
                        <div>
                            <label style="display: block; margin-bottom: 5px; color: var(--text-color); font-size: 14px;">日期范围</label>
                            <select id="date-range-select" style="padding: 8px 12px; border-radius: 8px; background: rgba(0,0,0,0.2); border: 1px solid var(--glass-border); color: var(--text-color);">
                                <option value="7">最近7天</option>
                                <option value="30" selected>最近30天</option>
                                <option value="90">最近90天</option>
                                <option value="all">全部</option>
                            </select>
                        </div>
                        <div>
                            <label style="display: block; margin-bottom: 5px; color: var(--text-color); font-size: 14px;">数据类型</label>
                            <select id="data-type-select" style="padding: 8px 12px; border-radius: 8px; background: rgba(0,0,0,0.2); border: 1px solid var(--glass-border); color: var(--text-color);">
                                <option value="all" selected>全部数据</option>
                                <option value="tasks">任务完成</option>
                                <option value="feedback">学习反馈</option>
                                <option value="checkin">词汇打卡</option>
                            </select>
                        </div>
                    </div>
                    <div style="display: flex; gap: 10px;">
                        <button id="refresh-history" class="btn-secondary" style="padding: 8px 16px; border-radius: 8px; background: rgba(255,255,255,0.1); border: 1px solid var(--glass-border); color: var(--text-color); cursor: pointer;">🔄 刷新</button>
                        <button id="export-history" class="btn-primary" style="padding: 8px 16px; border-radius: 8px; background: var(--accent-color); border: none; color: white; cursor: pointer;">📊 导出</button>
                            <button id="test-history" class="btn-secondary" style="padding: 8px 16px; border-radius: 8px; background: #6c757d; border: none; color: white; cursor: pointer; margin-left: 8px;">🧪 测试</button>
                    </div>
                </div>
            </div>

            <!-- 历史趋势图表 -->
            <div class="history-chart-container glass-effect" style="margin-bottom: 20px; padding: 20px; border-radius: 12px;">
                <h3 style="margin: 0 0 15px 0; color: var(--text-color); font-size: 18px;">📈 学习趋势分析</h3>
                <div style="position: relative; height: 300px;">
                    <canvas id="history-trend-chart"></canvas>
                </div>
            </div>

            <!-- 历史数据列表 -->
            <div class="history-data-container glass-effect" style="padding: 20px; border-radius: 12px;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                    <h3 style="margin: 0; color: var(--text-color); font-size: 18px;">📋 历史记录详情</h3>
                    <div style="display: flex; gap: 10px; align-items: center;">
                        <span id="data-count" style="color: var(--text-color-darker); font-size: 14px;">共 0 条记录</span>
                        <div style="display: flex; gap: 5px;">
                            <button id="prev-page" class="btn-secondary" style="padding: 5px 10px; border-radius: 6px; background: rgba(255,255,255,0.1); border: 1px solid var(--glass-border); color: var(--text-color); cursor: pointer;">‹</button>
                            <span id="page-info" style="color: var(--text-color); font-size: 14px; padding: 5px 10px;">1/1</span>
                            <button id="next-page" class="btn-secondary" style="padding: 5px 10px; border-radius: 6px; background: rgba(255,255,255,0.1); border: 1px solid var(--glass-border); color: var(--text-color); cursor: pointer;">›</button>
                        </div>
                    </div>
                </div>
                
                <!-- 数据表格 -->
                <div class="history-table-wrapper" style="overflow-x: auto;">
                    <table id="history-data-table" style="width: 100%; border-collapse: collapse;">
                        <thead>
                            <tr style="background: rgba(255,255,255,0.05); border-bottom: 1px solid var(--glass-border);">
                                <th style="padding: 12px; text-align: left; color: var(--text-color); font-weight: 600;">日期</th>
                                <th style="padding: 12px; text-align: left; color: var(--text-color); font-weight: 600;">任务完成率</th>
                                <th style="padding: 12px; text-align: left; color: var(--text-color); font-weight: 600;">专注度</th>
                                <th style="padding: 12px; text-align: left; color: var(--text-color); font-weight: 600;">积极性</th>
                                <th style="padding: 12px; text-align: left; color: var(--text-color); font-weight: 600;">词汇打卡</th>
                                <th style="padding: 12px; text-align: left; color: var(--text-color); font-weight: 600;">操作</th>
                            </tr>
                        </thead>
                        <tbody id="history-table-body">
                            <!-- 动态生成的历史数据行 -->
                        </tbody>
                    </table>
                </div>
                
                <!-- 空状态 -->
                <div id="empty-state" class="empty-state" style="display: none; text-align: center; padding: 40px; color: var(--text-color-darker);">
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom: 15px; opacity: 0.6;"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
                    <p style="margin: 0; font-size: 16px;">暂无历史数据</p>
                    <p style="margin: 5px 0 0 0; font-size: 14px;">开始您的学习之旅，记录每一天的进步！</p>
                </div>
            </div>
        </div>

        <!-- ======================= 真题在线页面 ======================= -->
        <div id="zhenti-view" class="view">
            <div class="zhenti-header glass-effect" style="margin-bottom: 20px; padding: 20px; border-radius: 12px;">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <div>
                        <h2 style="margin: 0 0 10px 0; font-size: 24px; color: var(--text-color);">📝 真题在线</h2>
                        <p style="margin: 0; color: var(--text-color-darker); font-size: 16px;">在线练习历年真题，提升应试能力</p>
                    </div>
                    <button 
                        id="open-zhenti-external" 
                        style="padding: 12px 20px; background: var(--accent-color); color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 8px; transition: all 0.3s ease;"
                        onmouseover="this.style.background='var(--accent-hover)'"
                        onmouseout="this.style.background='var(--accent-color)'">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
                            <polyline points="15,3 21,3 21,9"/>
                            <line x1="10" y1="14" x2="21" y2="3"/>
                        </svg>
                        新窗口打开
                    </button>
                </div>
            </div>
            
            <div class="zhenti-content glass-effect" style="padding: 0; border-radius: 12px; height: calc(100vh - 220px); overflow: hidden; position: relative;">
                <div style="position: absolute; top: 10px; right: 10px; z-index: 10;">
                    <button 
                        onclick="window.open('https://zhenti.burningvocabulary.cn/', '_blank')"
                        style="padding: 8px 12px; background: rgba(0,0,0,0.7); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 12px; display: flex; align-items: center; gap: 6px;"
                        title="在新标签页中打开">
                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
                            <polyline points="15,3 21,3 21,9"/>
                            <line x1="10" y1="14" x2="21" y2="3"/>
                        </svg>
                        新窗口
                    </button>
                </div>
                <iframe 
                    id="zhenti-iframe" 
                    src="https://zhenti.burningvocabulary.cn/" 
                    style="width: 100%; height: 100%; border: none; border-radius: 12px;"
                    frameborder="0"
                    allowfullscreen>
                </iframe>
            </div>
        </div>

        <!-- 【视图7】资源库 -->
        <div id="resource-view" class="view dashboard-grid">
            <div class="grid-item glass-effect" style="grid-column: 1 / -1;">
                <h3 class="card-title">📚 学习资源库</h3>
                <p style="color: var(--text-color-darker); margin-bottom: 30px;">精选优质学习资源，助力四六级备考</p>
            </div>

            <!-- 我是瑞思拜网课资源 -->
            <div class="grid-item glass-effect">
                <h3 class="card-title">🎓 我是瑞思拜网课资源</h3>
                <p style="color: var(--text-color-darker); margin-bottom: 20px;">专业的四六级网课资源，系统化学习方案</p>
                
                <div class="resource-section">
                    <h4 style="color: var(--accent-text); margin-bottom: 15px; font-size: var(--font-size-large);">📖 四级资源</h4>
                    <div class="resource-item">
                        <div class="resource-info">
                            <h5>四级全套网课资源</h5>
                            <p>包含听力、阅读、写作、翻译全模块教学视频及配套资料</p>
                        </div>
                        <div class="resource-actions">
                            <a href="https://pan.baidu.com/s/1QqNWPPu7Wm7MxujZzmaGog?pwd=1111" target="_blank" class="btn btn-download">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                                    <polyline points="7,10 12,15 17,10"/>
                                    <line x1="12" y1="15" x2="12" y2="3"/>
                                </svg>
                                百度网盘下载
                            </a>
                        </div>
                    </div>
                </div>

                <div class="resource-section">
                    <h4 style="color: var(--accent-text); margin-bottom: 15px; font-size: var(--font-size-large);">📚 六级资源</h4>
                    <div class="resource-item">
                        <div class="resource-info">
                            <h5>六级全套网课资源</h5>
                            <p>包含听力、阅读、写作、翻译全模块教学视频及配套资料</p>
                        </div>
                        <div class="resource-actions">
                            <a href="https://pan.baidu.com/s/1INXa-HKcjfjKmSsBq8xVJA?pwd=1111" target="_blank" class="btn btn-download">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                                    <polyline points="7,10 12,15 17,10"/>
                                    <line x1="12" y1="15" x2="12" y2="3"/>
                                </svg>
                                百度网盘下载
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 更多资源卡片预留位置 -->
            <div class="grid-item glass-effect">
                <h3 class="card-title">🔄 更多资源</h3>
                <p style="color: var(--text-color-darker); text-align: center; padding: 40px 20px;">更多优质学习资源正在整理中...</p>
            </div>
        </div>
    </main>



    <!-- ======================= 【新增】学习反馈模态框 ======================= -->
    <div id="feedback-modal" class="feedback-modal">
        <div class="feedback-content">
            <div class="feedback-header">
                <h2>📝 每日学习反馈</h2>
                <button class="close-feedback">&times;</button>
            </div>

            <form id="feedback-form">
                <!-- 第1部分：任务完成情况 -->
                <div class="feedback-section">
                    <h3 data-section="1">今日任务完成情况</h3>
                    <div id="task-completion-area" class="task-completion-list">
                        <!-- 动态生成任务列表 -->
                    </div>
                </div>

                <!-- 第2部分：学习状态评估 -->
                <div class="feedback-section">
                    <h3 data-section="2">今日学习状态评估</h3>
                    <div class="slider-group">
                        <label class="slider-label">专注度 (Focus):</label>
                        <div class="slider-container">
                            <span>1</span>
                            <input type="range" id="focus-slider" class="slider" min="1" max="5" value="3">
                            <span>5</span>
                            <div class="slider-value" id="focus-value">3</div>
                        </div>
                    </div>
                    <div class="slider-group">
                        <label class="slider-label">积极性 (Motivation):</label>
                        <div class="slider-container">
                            <span>1</span>
                            <input type="range" id="motivation-slider" class="slider" min="1" max="5" value="3">
                            <span>5</span>
                            <div class="slider-value" id="motivation-value">3</div>
                        </div>
                    </div>
                </div>

                <!-- 第3部分：过程反思 -->
                <div class="feedback-section">
                    <h3 data-section="3">过程反思</h3>
                    <div class="textarea-group">
                        <label>今日亮点 (Highlight):</label>
                        <textarea id="highlight" placeholder="今天学习中，哪个环节让你最有成就感？哪怕只是一个小小的进步。"></textarea>
                    </div>
                    <div class="textarea-group">
                        <label>最大挑战 (Challenge):</label>
                        <textarea id="challenge" placeholder="今天遇到的最大困难是什么？它出现在哪个任务中？"></textarea>
                    </div>
                    <div class="radio-group">
                        <label>原因分析 (Why):</label>
                        <div class="radio-options">
                            <label class="radio-option">
                                <input type="radio" name="cause" value="vocabulary">
                                <span class="radio-custom"></span>
                                单词不认识
                            </label>
                            <label class="radio-option">
                                <input type="radio" name="cause" value="grammar">
                                <span class="radio-custom"></span>
                                语法/长难句结构不清
                            </label>
                            <label class="radio-option">
                                <input type="radio" name="cause" value="knowledge">
                                <span class="radio-custom"></span>
                                知识点没掌握
                            </label>
                            <label class="radio-option">
                                <input type="radio" name="cause" value="attention">
                                <span class="radio-custom"></span>
                                注意力不集中/疲劳
                            </label>
                            <label class="radio-option">
                                <input type="radio" name="cause" value="time">
                                <span class="radio-custom"></span>
                                时间紧张
                            </label>
                            <label class="radio-option">
                                <input type="radio" name="cause" value="other">
                                <span class="radio-custom"></span>
                                其他：<input type="text" id="cause-other" placeholder="请描述..." style="margin-left: 10px; flex: 1; background: transparent; border: none; color: var(--text-color); outline: none;">
                            </label>
                        </div>
                    </div>
                    <div class="textarea-group">
                        <label>明日对策 (Action):</label>
                        <textarea id="action" placeholder="针对这个困难，明天你可以做一个什么样的微小改进？"></textarea>
                    </div>
                </div>

                <!-- 第4部分：情绪管理 -->
                <div class="feedback-section">
                    <h3 data-section="4">情绪管理</h3>
                    <div class="radio-group">
                        <label>启动时刻: 今天是否有过"不想学"的念头？你是如何克服并开始的？</label>
                        <div class="radio-options">
                            <label class="radio-option">
                                <input type="radio" name="startup" value="good-state">
                                <span class="radio-custom"></span>
                                没有这种念头，状态很好
                            </label>
                            <label class="radio-option">
                                <input type="radio" name="startup" value="15min-method">
                                <span class="radio-custom"></span>
                                运用了"先学15分钟"的方法
                            </label>
                            <label class="radio-option">
                                <input type="radio" name="startup" value="switch-task">
                                <span class="radio-custom"></span>
                                换了一个自己喜欢的学习任务先开始
                            </label>
                            <label class="radio-option">
                                <input type="radio" name="startup" value="rest-first">
                                <span class="radio-custom"></span>
                                休息了一会儿再开始
                            </label>
                            <label class="radio-option">
                                <input type="radio" name="startup" value="not-started">
                                <span class="radio-custom"></span>
                                最终没有开始，需要警惕
                            </label>
                            <label class="radio-option">
                                <input type="radio" name="startup" value="other">
                                <span class="radio-custom"></span>
                                其他：<input type="text" id="startup-other" placeholder="请描述..." style="margin-left: 10px; flex: 1; background: transparent; border: none; color: var(--text-color); outline: none;">
                            </label>
                        </div>
                    </div>
                </div>

                <!-- 提交按钮 -->
                <button type="submit" class="feedback-submit">完成反馈</button>
            </form>
        </div>
    </div>
    
    <!-- 轻量图表库：Chart.js CDN -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- Excel导出库：SheetJS CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <!-- Excel导出器 -->
    <script src="js/services/ExcelExporter.js"></script>
    <!-- 集成测试 -->
    <script src="js/tests/HistoryIntegration.test.js"></script>
    <script>
        function editNickname() {
            const current = localStorage.getItem('nickname') || '备考小能手';
            const name = prompt('请输入你的昵称：', current);
            if (name !== null) {
                const trimmed = name.trim();
                if (trimmed.length === 0) return; // 空值不处理
                localStorage.setItem('nickname', trimmed);
                // 同步更新侧边栏昵称
                const el = document.getElementById('nickname-display');
                if (el) el.textContent = trimmed;
                // 同步更新顶部问候
                const greetEl = document.getElementById('greet-name');
                if (greetEl) greetEl.textContent = trimmed;
            }
        }

        document.addEventListener('DOMContentLoaded', () => {

            // 初始化昵称（侧边栏与顶部问候）
            const nicknameEl = document.getElementById('nickname-display');
            const greetNameEl = document.getElementById('greet-name');
            const savedNickname = localStorage.getItem('nickname') || '备考小能手';
            if (nicknameEl) nicknameEl.textContent = savedNickname;
            if (greetNameEl) greetNameEl.textContent = savedNickname;

            // --- 移动端侧栏控制 ---
            const hamburgerMenu = document.getElementById('hamburger-menu');
            const sidebar = document.querySelector('.sidebar');
            const sidebarOverlay = document.getElementById('sidebar-overlay');

            // 切换侧栏显示状态
            function toggleSidebar() {
                const isOpen = sidebar.classList.contains('open');
                if (isOpen) {
                    closeSidebar();
                } else {
                    openSidebar();
                }
            }

            // 打开侧栏
            function openSidebar() {
                sidebar.classList.add('open');
                sidebarOverlay.classList.add('active');
                hamburgerMenu.classList.add('active');
                document.querySelector('.main-content').classList.add('sidebar-open');
                document.body.style.overflow = 'hidden'; // 防止背景滚动
            }

            // 关闭侧栏
            function closeSidebar() {
                sidebar.classList.remove('open');
                sidebarOverlay.classList.remove('active');
                hamburgerMenu.classList.remove('active');
                document.querySelector('.main-content').classList.remove('sidebar-open');
                document.body.style.overflow = ''; // 恢复滚动
            }

            // 汉堡菜单点击事件
            if (hamburgerMenu) {
                hamburgerMenu.addEventListener('click', toggleSidebar);
            }

            // 遮罩层点击关闭侧栏
            if (sidebarOverlay) {
                sidebarOverlay.addEventListener('click', closeSidebar);
            }

            // 侧栏导航点击后自动关闭（移动端）
            const navLinks = document.querySelectorAll('.sidebar .nav-link');
            navLinks.forEach(link => {
                link.addEventListener('click', () => {
                    if (window.innerWidth <= 992) {
                        closeSidebar();
                    }
                });
            });

            // 窗口大小改变时处理侧栏状态
            window.addEventListener('resize', () => {
                if (window.innerWidth > 992) {
                    closeSidebar(); // 大屏幕时确保侧栏状态正常
                }
            });

            // --- 模块4: 词汇打卡表（双轮复习）---
            const checkinTbody = document.getElementById('checkin-tbody');
            const weekInfo = document.getElementById('week-info');
            const prevWeekBtn = document.getElementById('prev-week');
            const nextWeekBtn = document.getElementById('next-week');

            const statTotal = document.getElementById('stat-total');
            const statReview = document.getElementById('stat-review');
            const statLearn = document.getElementById('stat-learn');
            const statDays = document.getElementById('stat-days');

            const DAY_LABELS = ['周一','周二','周三','周四','周五','周六','周日'];
            const SLOT_LABELS = ['上午','晚上'];
            const ACTIONS = ['review','learn']; // 复习/学习

            // 数据结构：按周索引存储（相对第1周），每周7天，每天2个时段，每个时段2个动作
            // 形如：data[weekIndex][dayIndex][slotIndex][action]
            let checkinData = JSON.parse(localStorage.getItem('checkinData')) || {};
            let currentWeek = parseInt(localStorage.getItem('currentWeek')) || 1;

            function getWeekKey(week) { return `week_${week}`; }

            function ensureWeek(week) {
                const key = getWeekKey(week);
                if (!checkinData[key]) {
                    checkinData[key] = Array.from({length:7}, () => (
                        Array.from({length:2}, () => ({ review: false, learn: false }))
                    ));
                }
            }

            // 获取当前日期的月份第几周
            function getWeekOfMonth(week) {
                const now = new Date();
                const currentYear = now.getFullYear();
                const currentMonth = now.getMonth();
                
                // 获取当月第一天
                const firstDay = new Date(currentYear, currentMonth, 1);
                // 获取当月第一天是星期几（0=周日，1=周一...）
                const firstDayOfWeek = firstDay.getDay() === 0 ? 7 : firstDay.getDay(); // 转换为周一=1的格式
                
                // 计算第一周的偏移
                const offset = firstDayOfWeek - 1;
                
                // 计算目标周的开始日期
                const targetDate = new Date(firstDay);
                targetDate.setDate(1 + (week - 1) * 7 - offset);
                
                const targetMonth = targetDate.getMonth() + 1; // 月份从0开始，所以+1
                const targetYear = targetDate.getFullYear();
                
                // 如果跨月了，显示对应月份
                if (targetMonth !== currentMonth + 1 || targetYear !== currentYear) {
                    return `${targetYear}年${targetMonth}月第${Math.ceil((targetDate.getDate() + offset) / 7)}周`;
                } else {
                    return `${currentMonth + 1}月第${week}周`;
                }
            }

            function renderWeek(week) {
                ensureWeek(week);
                const weekKey = getWeekKey(week);
                const weekArr = checkinData[weekKey];
                checkinTbody.innerHTML = '';
                weekInfo.textContent = getWeekOfMonth(week);

                weekArr.forEach((day, dayIdx) => {
                    const tr = document.createElement('tr');
                    const dateTd = document.createElement('td');
                    dateTd.className = 'day-header';
                    dateTd.textContent = DAY_LABELS[dayIdx];
                    tr.appendChild(dateTd);

                    // 上午/晚上两列
                    SLOT_LABELS.forEach((slotLabel, slotIdx) => {
                        const td = document.createElement('td');
                        const slotData = day[slotIdx];
                        const container = document.createElement('div');
                        container.className = 'time-slot';

                        const timeLabel = document.createElement('div');
                        timeLabel.className = 'time-label';
                        timeLabel.textContent = slotLabel;

                        const actions = document.createElement('div');
                        actions.className = 'checkin-actions';

                        // 两个按钮：复习/学习
                        ACTIONS.forEach(action => {
                            const btn = document.createElement('button');
                            btn.className = `checkin-btn ${action} ${slotData[action] ? 'completed' : ''}`;
                            btn.textContent = (action === 'review' ? '复习' : '学习');
                            btn.addEventListener('click', () => {
                                slotData[action] = !slotData[action];
                                saveData();
                                renderWeek(currentWeek);
                            });
                            actions.appendChild(btn);
                        });

                        // 编辑内容按钮
                        const editBtn = document.createElement('button');
                        editBtn.className = 'checkin-btn';
                        editBtn.style.background = 'rgba(255,255,255,0.08)';
                        editBtn.style.color = 'var(--text-color)';
                        editBtn.style.border = '1px solid var(--glass-border)';
                        editBtn.textContent = '编辑内容';
                        editBtn.addEventListener('click', () => {
                            const reviewText = slotData.reviewText || '';
                            const learnText = slotData.learnText || '';
                            const reviewInput = prompt('请输入本时段【复习】内容：', reviewText);
                            if (reviewInput !== null) {
                                slotData.reviewText = reviewInput.trim();
                            }
                            const learnInput = prompt('请输入本时段【学习】内容：', learnText);
                            if (learnInput !== null) {
                                slotData.learnText = learnInput.trim();
                            }
                            saveData();
                        });
                        actions.appendChild(editBtn);

                        container.appendChild(timeLabel);
                        container.appendChild(actions);

                        // 展示内容区域
                        const contentDiv = document.createElement('div');
                        contentDiv.style.marginTop = '8px';
                        contentDiv.style.fontSize = '12px';
                        contentDiv.style.color = 'var(--text-color-darker)';
                        const r = slotData.reviewText ? `复习：${slotData.reviewText}` : '';
                        const l = slotData.learnText ? `学习：${slotData.learnText}` : '';
                        contentDiv.textContent = [r, l].filter(Boolean).join(' ｜ ');
                        container.appendChild(contentDiv);

                        td.appendChild(container);
                        tr.appendChild(td);
                    });
                    checkinTbody.appendChild(tr);
                });

                updateStats();
            }

            function updateStats() {
                const weekKey = getWeekKey(currentWeek);
                const weekArr = checkinData[weekKey];
                let total = 0, review = 0, learn = 0, daysReached = 0;

                const reviewDaily = Array(7).fill(0);
                const learnDaily = Array(7).fill(0);

                weekArr.forEach((day, dIdx) => {
                    let dayCount = 0;
                    day.forEach(slot => {
                        if (slot.review) { review++; total++; dayCount++; }
                        if (slot.learn)  { learn++;  total++; dayCount++; }
                    });
                    if (dayCount >= 2) { daysReached++; }

                    // 每日统计：上午、晚上最多各1次，因此复习/学习的每日计数在0-2之间
                    reviewDaily[dIdx] = day.filter(s => s.review).length;
                    learnDaily[dIdx]  = day.filter(s => s.learn).length;
                });

                statTotal.textContent = total;
                statReview.textContent = review;
                statLearn.textContent = learn;
                statDays.textContent = `${daysReached}/7`;

                // 绘制/更新折线图
                const ctx = document.getElementById('checkin-chart');
                if (ctx) {
                    if (!window._checkinLineChart) {
                        window._checkinLineChart = new Chart(ctx, {
                            type: 'line',
                            data: {
                                labels: DAY_LABELS,
                                datasets: [
                                    {
                                        label: '复习',
                                        data: reviewDaily,
                                        borderColor: getComputedStyle(document.documentElement).getPropertyValue('--review-color').trim(),
                                        backgroundColor: 'rgba(255, 193, 7, 0.15)',
                                        tension: 0.35,
                                        fill: true,
                                        pointRadius: 3,
                                        pointHoverRadius: 5
                                    },
                                    {
                                        label: '学习',
                                        data: learnDaily,
                                        borderColor: getComputedStyle(document.documentElement).getPropertyValue('--learn-color').trim(),
                                        backgroundColor: 'rgba(33, 150, 243, 0.15)',
                                        tension: 0.35,
                                        fill: true,
                                        pointRadius: 3,
                                        pointHoverRadius: 5
                                    }
                                ]
                            },
                            options: {
                                responsive: true,
                                maintainAspectRatio: false,
                                plugins: {
                                    legend: { 
                                        labels: { 
                                            color: getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim() || '#e0e6f1',
                                            font: { size: 20 }
                                        } 
                                    }
                                },
                                scales: {
                                    x: { 
                                        ticks: { 
                                            color: getComputedStyle(document.documentElement).getPropertyValue('--text-color-darker').trim() || '#a5afc6',
                                            font: { size: 20 }
                                        }, 
                                        grid: { color: 'rgba(255,255,255,0.06)' }
                                    },
                                    y: { 
                                        beginAtZero: true, 
                                        suggestedMax: 2, 
                                        ticks: { 
                                            stepSize: 1, 
                                            color: getComputedStyle(document.documentElement).getPropertyValue('--text-color-darker').trim() || '#a5afc6',
                                            font: { size: 20 }
                                        }, 
                                        grid: { color: 'rgba(255,255,255,0.06)' }
                                    }
                                }
                            }
                        });
                    } else {
                        window._checkinLineChart.data.datasets[0].data = reviewDaily;
                        window._checkinLineChart.data.datasets[1].data = learnDaily;
                        window._checkinLineChart.update();
                    }
                }
            }

            function saveData() {
                localStorage.setItem('checkinData', JSON.stringify(checkinData));
                localStorage.setItem('currentWeek', currentWeek);
            }

            prevWeekBtn.addEventListener('click', () => { if (currentWeek > 1) { currentWeek--; saveData(); renderWeek(currentWeek); } });
            nextWeekBtn.addEventListener('click', () => { currentWeek++; saveData(); renderWeek(currentWeek); });

            // 初始渲染（保持其他模块之后执行）
            renderWeek(currentWeek);


            // --- 模块6: 历史回顾功能 ---
            let historyDataManager = null;
            let currentHistoryPage = 1;
            const historyPageSize = 10;
            let currentDateRange = '30';
            let currentDataType = 'all';
            let historyTrendChart = null;

            // 初始化历史回顾功能
            async function initHistoryView() {
                try {
                    // 动态导入历史数据管理器
                    const { HistoryDataManager } = await import('js/utils/HistoryDataManager.js');
                    historyDataManager = new HistoryDataManager();
                    
                    // 加载统计数据
                    await loadHistoryStats();
                    
                    // 加载趋势图表
                    await loadHistoryChart();
                    
                    // 加载历史数据列表
                    await loadHistoryData();
                    
                } catch (error) {
                    console.error('初始化历史回顾功能失败:', error);
                    showHistoryError('初始化失败，请刷新页面重试');
                }
            }

            // 加载统计数据
            async function loadHistoryStats() {
                try {
                    const stats = await historyDataManager.getStatistics();
                    
                    document.getElementById('total-days').textContent = stats.overview.totalDays || 0;
                    document.getElementById('avg-completion').textContent = `${Math.round(stats.overview.avgTaskCompletion || 0)}%`;
                    document.getElementById('streak-days').textContent = stats.patterns.longestStreak || 0;
                    document.getElementById('avg-focus').textContent = Math.round(stats.overview.avgFocus || 0);
                    
                } catch (error) {
                    console.error('加载统计数据失败:', error);
                }
            }

            // 加载趋势图表
            async function loadHistoryChart() {
                try {
                    const endDate = new Date();
                    const startDate = new Date();
                    
                    if (currentDateRange === 'all') {
                        startDate.setFullYear(startDate.getFullYear() - 1); // 最多显示1年
                    } else {
                        startDate.setDate(startDate.getDate() - parseInt(currentDateRange));
                    }
                    
                    const dateRange = await historyDataManager.getDateRangeData(
                        startDate.toISOString().split('T')[0],
                        endDate.toISOString().split('T')[0],
                        { fillGaps: true }
                    );
                    
                    renderHistoryChart(dateRange);
                    
                } catch (error) {
                    console.error('加载趋势图表失败:', error);
                }
            }

            // 渲染历史趋势图表
            function renderHistoryChart(data) {
                const ctx = document.getElementById('history-trend-chart');
                if (!ctx) return;
                
                const labels = data.map(item => {
                    const date = new Date(item.date);
                    return `${date.getMonth() + 1}/${date.getDate()}`;
                });
                
                const taskCompletionData = data.map(item => item.taskCompletion || 0);
                const focusData = data.map(item => item.focus || 0);
                const motivationData = data.map(item => item.motivation || 0);
                
                if (historyTrendChart) {
                    historyTrendChart.destroy();
                }
                
                historyTrendChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [
                            {
                                label: '任务完成率 (%)',
                                data: taskCompletionData,
                                borderColor: getComputedStyle(document.documentElement).getPropertyValue('--accent-color').trim(),
                                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                                tension: 0.4,
                                fill: true,
                                pointRadius: 3,
                                pointHoverRadius: 6
                            },
                            {
                                label: '专注度',
                                data: focusData,
                                borderColor: getComputedStyle(document.documentElement).getPropertyValue('--success-color').trim(),
                                backgroundColor: 'rgba(34, 197, 94, 0.1)',
                                tension: 0.4,
                                fill: false,
                                pointRadius: 3,
                                pointHoverRadius: 6
                            },
                            {
                                label: '积极性',
                                data: motivationData,
                                borderColor: getComputedStyle(document.documentElement).getPropertyValue('--warning-color').trim(),
                                backgroundColor: 'rgba(251, 191, 36, 0.1)',
                                tension: 0.4,
                                fill: false,
                                pointRadius: 3,
                                pointHoverRadius: 6
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                labels: {
                                    color: getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim(),
                                    font: { size: 12 }
                                }
                            },
                            tooltip: {
                                mode: 'index',
                                intersect: false,
                                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                                titleColor: '#fff',
                                bodyColor: '#fff',
                                borderColor: 'rgba(255, 255, 255, 0.2)',
                                borderWidth: 1
                            }
                        },
                        scales: {
                            x: {
                                ticks: {
                                    color: getComputedStyle(document.documentElement).getPropertyValue('--text-color-darker').trim(),
                                    font: { size: 11 }
                                },
                                grid: { color: 'rgba(255,255,255,0.06)' }
                            },
                            y: {
                                beginAtZero: true,
                                suggestedMax: 100,
                                ticks: {
                                    color: getComputedStyle(document.documentElement).getPropertyValue('--text-color-darker').trim(),
                                    font: { size: 11 }
                                },
                                grid: { color: 'rgba(255,255,255,0.06)' }
                            }
                        },
                        interaction: {
                            mode: 'nearest',
                            axis: 'x',
                            intersect: false
                        },
                        onClick: (event, elements) => {
                            if (elements.length > 0) {
                                const elementIndex = elements[0].index;
                                const clickedDate = data[elementIndex]?.date;
                                if (clickedDate) {
                                    window.viewHistoryDetail(clickedDate);
                                }
                            }
                        },
                        onHover: (event, elements) => {
                            event.native.target.style.cursor = elements.length > 0 ? 'pointer' : 'default';
                        }
                    }
                });
            }

            // 加载历史数据列表
            async function loadHistoryData() {
                try {
                    const options = {
                        page: currentHistoryPage,
                        pageSize: historyPageSize,
                        sortBy: 'date',
                        sortOrder: 'desc'
                    };
                    
                    if (currentDateRange !== 'all') {
                        const endDate = new Date();
                        const startDate = new Date();
                        startDate.setDate(startDate.getDate() - parseInt(currentDateRange));
                        
                        options.startDate = startDate.toISOString().split('T')[0];
                        options.endDate = endDate.toISOString().split('T')[0];
                    }
                    
                    const result = await historyDataManager.getSnapshotList(options);
                    
                    renderHistoryTable(result.snapshots);
                    updateHistoryPagination(result.pagination);
                    
                } catch (error) {
                    console.error('加载历史数据失败:', error);
                    showHistoryError('加载数据失败');
                }
            }

            // 渲染历史数据表格
            function renderHistoryTable(snapshots) {
                const tbody = document.getElementById('history-table-body');
                const emptyState = document.getElementById('empty-state');
                const table = document.getElementById('history-data-table');
                
                if (!snapshots || snapshots.length === 0) {
                    table.style.display = 'none';
                    emptyState.style.display = 'block';
                    return;
                }
                
                table.style.display = 'table';
                emptyState.style.display = 'none';
                
                tbody.innerHTML = '';
                
                snapshots.forEach(snapshot => {
                    const row = document.createElement('tr');
                    row.style.borderBottom = '1px solid var(--glass-border)';
                    row.style.transition = 'background-color 0.2s ease';
                    
                    // 格式化日期
                    const date = new Date(snapshot.date);
                    const formattedDate = `${date.getMonth() + 1}/${date.getDate()}`;
                    
                    // 任务完成率
                    const taskCompletion = snapshot.taskCompletion || 0;
                    const taskCompletionColor = taskCompletion >= 80 ? 'var(--success-color)' : 
                                               taskCompletion >= 60 ? 'var(--warning-color)' : 'var(--error-color)';
                    
                    // 专注度和积极性
                    const focus = snapshot.focus || 0;
                    const motivation = snapshot.motivation || 0;
                    
                    // 词汇打卡统计
                    const checkinStats = snapshot.checkinStats || { total: 0, review: 0, learn: 0 };
                    const checkinText = `${checkinStats.total}次 (复习${checkinStats.review}/学习${checkinStats.learn})`;
                    
                    row.innerHTML = `
                        <td style="padding: 12px; color: var(--text-color);">${formattedDate}</td>
                        <td style="padding: 12px;">
                            <span style="color: ${taskCompletionColor}; font-weight: 600;">${taskCompletion}%</span>
                        </td>
                        <td style="padding: 12px; color: var(--text-color);">${focus}/5</td>
                        <td style="padding: 12px; color: var(--text-color);">${motivation}/5</td>
                        <td style="padding: 12px; color: var(--text-color-darker); font-size: 13px;">${checkinText}</td>
                        <td style="padding: 12px;">
                            <button onclick="viewHistoryDetail('${snapshot.date}')" 
                                    style="padding: 4px 8px; border-radius: 4px; background: rgba(255,255,255,0.1); 
                                           border: 1px solid var(--glass-border); color: var(--text-color); 
                                           cursor: pointer; font-size: 12px;">详情</button>
                        </td>
                    `;
                    
                    // 悬停效果
                    row.addEventListener('mouseenter', () => {
                        row.style.backgroundColor = 'rgba(255,255,255,0.05)';
                    });
                    
                    row.addEventListener('mouseleave', () => {
                        row.style.backgroundColor = 'transparent';
                    });
                    
                    tbody.appendChild(row);
                });
            }

            // 更新分页信息
            function updateHistoryPagination(pagination) {
                document.getElementById('data-count').textContent = `共 ${pagination.total} 条记录`;
                document.getElementById('page-info').textContent = `${pagination.currentPage}/${pagination.totalPages}`;
                
                const prevBtn = document.getElementById('prev-page');
                const nextBtn = document.getElementById('next-page');
                
                prevBtn.disabled = pagination.currentPage <= 1;
                nextBtn.disabled = pagination.currentPage >= pagination.totalPages;
                
                prevBtn.style.opacity = prevBtn.disabled ? '0.5' : '1';
                nextBtn.style.opacity = nextBtn.disabled ? '0.5' : '1';
            }

            // 查看历史详情
            window.viewHistoryDetail = async function(date) {
                try {
                    const snapshot = await historyDataManager.getSnapshot(date);
                    if (snapshot) {
                        showHistoryDetailModal(snapshot);
                    } else {
                        alert('未找到该日期的学习记录');
                    }
                } catch (error) {
                    console.error('获取历史详情失败:', error);
                    alert('获取详情失败，请重试');
                }
            };
            
            // 为全局访问提供别名
            window.viewHistoryDetailFromChart = window.viewHistoryDetail;

            // 显示历史详情模态框
            function showHistoryDetailModal(snapshot) {
                // 创建模态框HTML
                const modalHtml = `
                    <div id="history-detail-modal" class="modal" style="display: flex; z-index: 1001;">
                        <div class="modal-content" style="width: min(600px, 90vw); max-height: 80vh; overflow: auto;">
                            <div class="modal-header">
                                <h3>📅 ${snapshot.date} 学习详情</h3>
                                <button onclick="closeHistoryDetailModal()">&times;</button>
                            </div>
                            <div class="modal-body" style="padding: 20px;">
                                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
                                    <div class="detail-card" style="padding: 15px; background: rgba(255,255,255,0.05); border-radius: 8px;">
                                        <h4 style="margin: 0 0 10px 0; color: var(--accent-color);">📋 任务完成情况</h4>
                                        <p style="margin: 5px 0; color: var(--text-color);">完成率: <strong>${snapshot.taskCompletion || 0}%</strong></p>
                                        <p style="margin: 5px 0; color: var(--text-color-darker); font-size: 14px;">总任务: ${snapshot.tasks?.length || 0} 个</p>
                                        <p style="margin: 5px 0; color: var(--text-color-darker); font-size: 14px;">已完成: ${snapshot.tasks?.filter(t => t.completed).length || 0} 个</p>
                                    </div>
                                    <div class="detail-card" style="padding: 15px; background: rgba(255,255,255,0.05); border-radius: 8px;">
                                        <h4 style="margin: 0 0 10px 0; color: var(--success-color);">🎯 学习状态</h4>
                                        <p style="margin: 5px 0; color: var(--text-color);">专注度: <strong>${snapshot.focus || 0}/5</strong></p>
                                        <p style="margin: 5px 0; color: var(--text-color);">积极性: <strong>${snapshot.motivation || 0}/5</strong></p>
                                    </div>
                                </div>
                                
                                ${snapshot.tasks && snapshot.tasks.length > 0 ? `
                                    <div style="margin-bottom: 20px;">
                                        <h4 style="margin: 0 0 10px 0; color: var(--text-color);">📝 任务列表</h4>
                                        <div style="max-height: 200px; overflow-y: auto;">
                                            ${snapshot.tasks.map(task => `
                                                <div style="display: flex; align-items: center; gap: 10px; padding: 8px; 
                                                           background: rgba(0,0,0,0.2); border-radius: 6px; margin-bottom: 5px;">
                                                    <span style="color: ${task.completed ? 'var(--success-color)' : 'var(--text-color-darker)'}; font-size: 16px;">
                                                        ${task.completed ? '✅' : '⭕'}
                                                    </span>
                                                    <span style="color: var(--text-color); font-size: 14px; flex: 1;">${task.text}</span>
                                                </div>
                                            `).join('')}
                                        </div>
                                    </div>
                                ` : ''}
                                
                                ${snapshot.checkinStats ? `
                                    <div>
                                        <h4 style="margin: 0 0 10px 0; color: var(--warning-color);">📚 词汇打卡</h4>
                                        <p style="margin: 5px 0; color: var(--text-color);">总打卡: <strong>${snapshot.checkinStats.total || 0}</strong> 次</p>
                                        <p style="margin: 5px 0; color: var(--text-color);">复习: <strong>${snapshot.checkinStats.review || 0}</strong> 次</p>
                                        <p style="margin: 5px 0; color: var(--text-color);">学习: <strong>${snapshot.checkinStats.learn || 0}</strong> 次</p>
                                    </div>
                                ` : ''}
                            </div>
                        </div>
                    </div>
                `;
                
                // 添加到页面
                document.body.insertAdjacentHTML('beforeend', modalHtml);
            }

            // 关闭历史详情模态框
            window.closeHistoryDetailModal = function() {
                const modal = document.getElementById('history-detail-modal');
                if (modal) {
                    modal.remove();
                }
            };
            


            // 显示错误信息
            function showHistoryError(message) {
                const emptyState = document.getElementById('empty-state');
                if (emptyState) {
                    emptyState.style.display = 'block';
                    emptyState.innerHTML = `
                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom: 15px; opacity: 0.6; color: var(--error-color);"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                        <p style="margin: 0; font-size: 16px; color: var(--error-color);">${message}</p>
                        <button onclick="location.reload()" style="margin-top: 10px; padding: 8px 16px; border-radius: 6px; background: var(--accent-color); border: none; color: white; cursor: pointer;">重新加载</button>
                    `;
                }
            }

            // 历史回顾事件监听器
            document.addEventListener('DOMContentLoaded', () => {
                // 日期范围选择
                const dateRangeSelect = document.getElementById('date-range-select');
                if (dateRangeSelect) {
                    dateRangeSelect.addEventListener('change', async (e) => {
                        currentDateRange = e.target.value;
                        currentHistoryPage = 1;
                        await loadHistoryChart();
                        await loadHistoryData();
                        await loadHistoryStats();
                    });
                }
                
                // 数据类型选择
                const dataTypeSelect = document.getElementById('data-type-select');
                if (dataTypeSelect) {
                    dataTypeSelect.addEventListener('change', async (e) => {
                        currentDataType = e.target.value;
                        currentHistoryPage = 1;
                        await loadHistoryData();
                    });
                }
                
                // 刷新按钮
                const refreshBtn = document.getElementById('refresh-history');
                if (refreshBtn) {
                    refreshBtn.addEventListener('click', async () => {
                        refreshBtn.textContent = '🔄 刷新中...';
                        refreshBtn.disabled = true;
                        
                        try {
                            await loadHistoryStats();
                            await loadHistoryChart();
                            await loadHistoryData();
                        } finally {
                            refreshBtn.textContent = '🔄 刷新';
                            refreshBtn.disabled = false;
                        }
                    });
                }
                
                // 导出按钮
                const exportBtn = document.getElementById('export-history');
                if (exportBtn) {
                    exportBtn.addEventListener('click', async () => {
                        try {
                            exportBtn.textContent = '📊 导出中...';
                            exportBtn.disabled = true;
                            
                            // 获取当前筛选条件
                            const startDate = document.getElementById('start-date')?.value;
                            const endDate = document.getElementById('end-date')?.value;
                            
                            // 检查是否支持Excel导出
                            const supportedFormats = historyDataManager.getSupportedExportFormats();
                            const hasExcel = supportedFormats.some(f => f.value === 'excel');
                            
                            let format = 'json'; // 默认格式
                            
                            // 如果支持Excel，询问用户选择格式
                            if (hasExcel) {
                                const choice = confirm('选择导出格式：\n确定 = Excel格式（推荐）\n取消 = JSON格式');
                                format = choice ? 'excel' : 'json';
                            }
                            
                            const exportOptions = {
                                format: format,
                                startDate: startDate,
                                endDate: endDate,
                                includeSummary: format === 'excel' // Excel格式包含摘要
                            };
                            
                            const result = await historyDataManager.exportData(exportOptions);
                            
                            if (result.success) {
                                if (format === 'excel') {
                                    // Excel导出由ExcelExporter直接处理下载
                                    alert(`✅ ${result.message}`);
                                } else {
                                    // JSON/CSV格式需要手动创建下载
                                    const blob = new Blob([result.data], { type: result.mimeType });
                                    const url = URL.createObjectURL(blob);
                                    const a = document.createElement('a');
                                    a.href = url;
                                    a.download = result.filename;
                                    document.body.appendChild(a);
                                    a.click();
                                    document.body.removeChild(a);
                                    URL.revokeObjectURL(url);
                                    
                                    alert(`✅ 成功导出 ${result.recordCount} 条记录`);
                                }
                            } else {
                                throw new Error(result.error || '导出失败');
                            }
                            
                        } catch (error) {
                            console.error('导出失败:', error);
                            alert(`❌ 导出失败: ${error.message}`);
                        } finally {
                            exportBtn.textContent = '📊 导出';
                            exportBtn.disabled = false;
                        }
                    });
                }
                
                // 测试按钮
                const testBtn = document.getElementById('test-history');
                if (testBtn) {
                    testBtn.addEventListener('click', async () => {
                        try {
                            testBtn.textContent = '🧪 测试中...';
                            testBtn.disabled = true;
                            
                            // 创建并运行集成测试
                            if (typeof HistoryIntegrationTest !== 'undefined') {
                                const test = new HistoryIntegrationTest();
                                const result = await test.runAllTests();
                                
                                // 显示测试结果摘要
                                const message = `🧪 集成测试完成\n\n` +
                                    `📊 总测试数: ${result.total}\n` +
                                    `✅ 通过: ${result.passed}\n` +
                                    `❌ 失败: ${result.failed}\n` +
                                    `📈 通过率: ${result.passRate}%\n\n` +
                                    `详细结果请查看浏览器控制台`;
                                
                                alert(message);
                            } else {
                                alert('❌ 测试模块未加载');
                            }
                            
                        } catch (error) {
                            console.error('测试执行失败:', error);
                            alert(`❌ 测试执行失败: ${error.message}`);
                        } finally {
                            testBtn.textContent = '🧪 测试';
                            testBtn.disabled = false;
                        }
                    });
                }
                
                // 分页按钮
                const prevBtn = document.getElementById('prev-page');
                const nextBtn = document.getElementById('next-page');
                
                if (prevBtn) {
                    prevBtn.addEventListener('click', async () => {
                        if (currentHistoryPage > 1) {
                            currentHistoryPage--;
                            await loadHistoryData();
                        }
                    });
                }
                
                if (nextBtn) {
                    nextBtn.addEventListener('click', async () => {
                        currentHistoryPage++;
                        await loadHistoryData();
                    });
                }
            });


            // --- 模块1: 页面/视图切换 ---
            const viewNavLinks = document.querySelectorAll('.nav-link');
            const views = document.querySelectorAll('.view');
            
            viewNavLinks.forEach(link => {
                link.addEventListener('click', async () => {
                    // 激活侧边栏样式
                    viewNavLinks.forEach(nav => nav.classList.remove('active'));
                    link.classList.add('active');
                    
                    // 显示对应的视图
                    const targetViewId = link.getAttribute('data-view');
                    views.forEach(view => {
                        view.classList.remove('active', 'active-grid');
                        if (view.id === targetViewId) {
                            if (view.classList.contains('dashboard-grid')) {
                                view.classList.add('active-grid');
                            } else {
                                view.classList.add('active');
                            }
                        }
                    });
                    
                    // 特殊处理历史回顾视图
                    if (targetViewId === 'history-view') {
                        if (!historyDataManager) {
                            await initHistoryView();
                        } else {
                            // 如果已经初始化，刷新数据
                            await loadHistoryStats();
                            await loadHistoryChart();
                            await loadHistoryData();
                        }
                    }
                });
            });

            // --- 真题在线按钮事件监听器 ---
            const openZhentiBtn = document.getElementById('open-zhenti-external');
            if (openZhentiBtn) {
                openZhentiBtn.addEventListener('click', () => {
                    window.open('https://zhenti.burningvocabulary.cn/', '_blank');
                });
            }

            // --- 听力训练按钮事件监听器 ---
            const openListeningBtn = document.getElementById('open-listening-external');
            if (openListeningBtn) {
                openListeningBtn.addEventListener('click', () => {
                    window.open('https://www.21voa.com/special_english/', '_blank');
                });
            }

            // --- 模块2: 可编辑的今日任务 ---
            const taskForm = document.getElementById('add-task-form');
            const taskInput = document.getElementById('new-task-input');
            const taskListUl = document.getElementById('task-list-ul');

            // 从本地存储加载任务
            let tasks = JSON.parse(localStorage.getItem('tasks')) || [
                { text: "上午词汇学习: 复习 'peri' + 学习 'indenti' 词根", completed: false },
                { text: "听力精听训练: VOA 慢速英语一篇", completed: false },
                { text: "晚上词汇复习: 巩固今天所学 (至少间隔6h)", completed: true }
            ];

            function saveTasks() {
                localStorage.setItem('tasks', JSON.stringify(tasks));
            }

            function renderTasks() {
                taskListUl.innerHTML = '';
                tasks.forEach((task, index) => {
                    const li = document.createElement('li');
                    
                    li.innerHTML = `
                        <input type="checkbox" id="task${index}" ${task.completed ? 'checked' : ''}>
                        <label for="task${index}">
                            <span class="custom-checkbox">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </span>
                            <span class="task-text">${task.text}</span>
                        </label>
                        <button class="delete-task" data-index="${index}">&times;</button>
                    `;
                    
                    // 添加完成任务的事件监听
                    li.querySelector('input[type="checkbox"]').addEventListener('change', () => {
                        tasks[index].completed = !tasks[index].completed;
                        saveTasks();
                        renderTasks();
                    });

                    // 添加删除任务的事件监听
                    li.querySelector('.delete-task').addEventListener('click', (e) => {
                        const taskIndex = e.target.getAttribute('data-index');
                        tasks.splice(taskIndex, 1);
                        saveTasks();
                        renderTasks();
                    });

                    taskListUl.appendChild(li);
                });
            }

            taskForm.addEventListener('submit', (e) => {
                e.preventDefault();
                const taskText = taskInput.value.trim();
                if (taskText) {
                    tasks.push({ text: taskText, completed: false });
                    saveTasks();
                    renderTasks();
                    taskInput.value = '';
                }
            });

            renderTasks(); // 初始渲染





            // --- 模块4: 每日学习反馈 ---
            const feedbackBtn = document.getElementById('feedback-btn');
            const feedbackModal = document.getElementById('feedback-modal');
            const closeFeedbackBtn = document.querySelector('.close-feedback');
            const feedbackForm = document.getElementById('feedback-form');
            const feedbackBefore = document.getElementById('feedback-before');
            const feedbackAfter = document.getElementById('feedback-after');
            const feedbackBtnText = document.getElementById('feedback-btn-text');
            const feedbackStats = document.getElementById('feedback-stats');

            // 滑块实时显示值
            const focusSlider = document.getElementById('focus-slider');
            const motivationSlider = document.getElementById('motivation-slider');
            const focusValue = document.getElementById('focus-value');
            const motivationValue = document.getElementById('motivation-value');

            // 检查今日是否已完成反馈
            function checkTodayFeedback() {
                const today = new Date().toISOString().split('T')[0];
                const feedbackData = JSON.parse(localStorage.getItem('dailyFeedbackData')) || {};
                return feedbackData[today] || null;
            }

            // 初始化反馈卡片状态
            function initFeedbackCard() {
                const todayFeedback = checkTodayFeedback();
                if (todayFeedback) {
                    // 已完成反馈 - 显示"after"状态
                    feedbackBefore.classList.remove('active');
                    feedbackAfter.classList.add('active');
                    feedbackBtnText.textContent = '查看反馈';
                    feedbackStats.style.display = 'block';
                    
                    // 显示今日统计
                    document.getElementById('stat-focus').textContent = todayFeedback.focus;
                    document.getElementById('stat-motivation').textContent = todayFeedback.motivation;
                    document.getElementById('stat-task-completion').textContent = todayFeedback.taskCompletion;
                } else {
                    // 未完成反馈 - 显示"before"状态
                    feedbackBefore.classList.add('active');
                    feedbackAfter.classList.remove('active');
                    feedbackBtnText.textContent = '开始反馈';
                    feedbackStats.style.display = 'none';
                }
            }

            // 计算任务完成率
            function calculateTaskCompletion() {
                const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
                if (tasks.length === 0) return 0;
                const completedTasks = tasks.filter(task => task.completed).length;
                return Math.round((completedTasks / tasks.length) * 100);
            }

            // 生成任务完成列表
            function generateTaskCompletionArea() {
                const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
                const taskArea = document.getElementById('task-completion-area');
                taskArea.innerHTML = '';
                
                tasks.forEach((task, index) => {
                    const taskItem = document.createElement('div');
                    taskItem.className = 'task-completion-item';
                    taskItem.innerHTML = `
                        <input type="checkbox" id="feedback-task-${index}" ${task.completed ? 'checked' : ''}>
                        <label for="feedback-task-${index}">
                            <span class="custom-checkbox">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </span>
                            <span class="task-text">${task.text}</span>
                        </label>
                    `;
                    taskArea.appendChild(taskItem);
                });
            }

            // 滑块值实时更新
            focusSlider.addEventListener('input', () => {
                focusValue.textContent = focusSlider.value;
            });
            
            motivationSlider.addEventListener('input', () => {
                motivationValue.textContent = motivationSlider.value;
            });

            // 打开反馈模态框
            feedbackBtn.addEventListener('click', () => {
                generateTaskCompletionArea();
                const todayFeedback = checkTodayFeedback();
                
                if (todayFeedback) {
                    // 查看模式：填充已有数据
                    fillFormWithData(todayFeedback);
                } else {
                    // 填写模式：重置表单
                    feedbackForm.reset();
                    focusValue.textContent = '3';
                    motivationValue.textContent = '3';
                }
                
                feedbackModal.classList.add('open');
            });

            // 关闭模态框
            function closeFeedbackModal() {
                feedbackModal.classList.remove('open');
            }

            closeFeedbackBtn.addEventListener('click', closeFeedbackModal);
            feedbackModal.addEventListener('click', (e) => {
                if (e.target === feedbackModal) {
                    closeFeedbackModal();
                }
            });

            // 用已有数据填充表单
            function fillFormWithData(data) {
                focusSlider.value = data.focus;
                motivationSlider.value = data.motivation;
                focusValue.textContent = data.focus;
                motivationValue.textContent = data.motivation;
                
                document.getElementById('highlight').value = data.highlight || '';
                document.getElementById('challenge').value = data.challenge || '';
                document.getElementById('action').value = data.action || '';
                
                if (data.cause) {
                    const causeRadio = document.querySelector(`input[name="cause"][value="${data.cause}"]`);
                    if (causeRadio) causeRadio.checked = true;
                    if (data.cause === 'other' && data.causeOther) {
                        document.getElementById('cause-other').value = data.causeOther;
                    }
                }
                
                if (data.startup) {
                    const startupRadio = document.querySelector(`input[name="startup"][value="${data.startup}"]`);
                    if (startupRadio) startupRadio.checked = true;
                    if (data.startup === 'other' && data.startupOther) {
                        document.getElementById('startup-other').value = data.startupOther;
                    }
                }
            }

            // 提交反馈表单
            feedbackForm.addEventListener('submit', (e) => {
                e.preventDefault();
                
                // 同步“任务完成情况”到今日任务数据
                try {
                    const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
                    if (tasks.length > 0) {
                        tasks.forEach((task, index) => {
                            const cb = document.getElementById(`feedback-task-${index}`);
                            if (cb) task.completed = cb.checked === true;
                        });
                        localStorage.setItem('tasks', JSON.stringify(tasks));
                        // 如果渲染函数存在，刷新任务区
                        if (typeof renderTasks === 'function') {
                            try { renderTasks(); } catch (_) {}
                        }
                    }
                } catch (_) {}

                // 重新计算完成率（基于同步后的任务状态）
                const completion = calculateTaskCompletion();
                
                // 收集表单数据
                const formData = {
                    date: new Date().toISOString().split('T')[0],
                    taskCompletion: completion,
                    focus: parseInt(focusSlider.value),
                    motivation: parseInt(motivationSlider.value),
                    highlight: document.getElementById('highlight').value.trim(),
                    challenge: document.getElementById('challenge').value.trim(),
                    action: document.getElementById('action').value.trim(),
                    cause: document.querySelector('input[name="cause"]:checked')?.value || '',
                    causeOther: document.getElementById('cause-other').value.trim(),
                    startup: document.querySelector('input[name="startup"]:checked')?.value || '',
                    startupOther: document.getElementById('startup-other').value.trim(),
                    timestamp: new Date().toISOString()
                };

                // 保存到localStorage
                const feedbackData = JSON.parse(localStorage.getItem('dailyFeedbackData')) || {};
                feedbackData[formData.date] = formData;
                localStorage.setItem('dailyFeedbackData', JSON.stringify(feedbackData));

                // 关闭模态框并更新卡片状态
                closeFeedbackModal();
                initFeedbackCard();
                updateFeedbackChart();
                
                // 显示成功提示（简单的alert，后续可以用更优雅的toast）
                alert('✅ 反馈已保存！明天继续加油～');
            });

            // 更新反馈趋势图
            function updateFeedbackChart() {
                const feedbackData = JSON.parse(localStorage.getItem('dailyFeedbackData')) || {};
                const ctx = document.getElementById('feedback-chart');
                if (!ctx) return;

                // 获取最近7天的数据
                const last7Days = [];
                const focusData = [];
                const motivationData = [];
                
                for (let i = 6; i >= 0; i--) {
                    const date = new Date();
                    date.setDate(date.getDate() - i);
                    const dateStr = date.toISOString().split('T')[0];
                    const dayData = feedbackData[dateStr];
                    
                    last7Days.push(date.toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' }));
                    focusData.push(dayData ? dayData.focus : null);
                    motivationData.push(dayData ? dayData.motivation : null);
                }

                // 计算平均值
                const validFocus = focusData.filter(val => val !== null);
                const validMotivation = motivationData.filter(val => val !== null);
                const avgFocus = validFocus.length > 0 ? (validFocus.reduce((a, b) => a + b, 0) / validFocus.length).toFixed(1) : '-';
                const avgMotivation = validMotivation.length > 0 ? (validMotivation.reduce((a, b) => a + b, 0) / validMotivation.length).toFixed(1) : '-';
                
                document.getElementById('avg-focus').textContent = avgFocus;
                document.getElementById('avg-motivation').textContent = avgMotivation;

                // 创建或更新图表
                if (!window._feedbackChart) {
                    window._feedbackChart = new Chart(ctx, {
                        type: 'line',
                        data: {
                            labels: last7Days,
                            datasets: [
                                {
                                    label: '专注度',
                                    data: focusData,
                                    borderColor: 'rgb(59, 130, 246)',
                                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
                                    tension: 0.4,
                                    fill: true,
                                    pointRadius: 4,
                                    pointHoverRadius: 6,
                                    spanGaps: true
                                },
                                {
                                    label: '积极性',
                                    data: motivationData,
                                    borderColor: 'rgb(16, 185, 129)',
                                    backgroundColor: 'rgba(16, 185, 129, 0.1)',
                                    tension: 0.4,
                                    fill: true,
                                    pointRadius: 4,
                                    pointHoverRadius: 6,
                                    spanGaps: true
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    labels: {
                                        color: 'rgba(224, 230, 241, 0.8)',
                                        font: { size: 12 }
                                    }
                                }
                            },
                            scales: {
                                x: {
                                    ticks: {
                                        color: 'rgba(165, 175, 198, 0.8)',
                                        font: { size: 11 }
                                    },
                                    grid: { color: 'rgba(255,255,255,0.08)' }
                                },
                                y: {
                                    beginAtZero: true,
                                    min: 1,
                                    max: 5,
                                    ticks: {
                                        stepSize: 1,
                                        color: 'rgba(165, 175, 198, 0.8)',
                                        font: { size: 11 }
                                    },
                                    grid: { color: 'rgba(255,255,255,0.08)' }
                                }
                            }
                        }
                    });
                } else {
                    window._feedbackChart.data.labels = last7Days;
                    window._feedbackChart.data.datasets[0].data = focusData;
                    window._feedbackChart.data.datasets[1].data = motivationData;
                    window._feedbackChart.update();
                }
            }

            // 初始化反馈模块
            initFeedbackCard();
            updateFeedbackChart();
        });
    </script>

    <!-- 页面版权水印 -->
    <div class="watermark">
        <p>Agora工作组</p>
        <p>本网站由Agora工作组维护</p>
    </div>
</body>
</html>